<template>
  <div class="personal">
    <el-card class="info">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div class="content">
        <div class="avatar" @click="openAvatar">
          <img :src="BASE_URL + ruleForm.avatarUrl" alt="加载失败">
        </div>
        <ul>
          <li>
            <div class="left">
              <i class="el-icon-user"></i>用户名
            </div>
            <div class="right">{{ruleForm.userName}}</div>
          </li>
          <li>
            <div class="left">
              <i class="el-icon-phone-outline"></i>手机号码
            </div>
            <div class="right">{{ruleForm.mobile}}</div>
          </li>
          <li>
            <div class="left">
              <i class="el-icon-news"></i>邮箱
            </div>
            <div class="right">{{ruleForm.email}}</div>
          </li>
          <!--          <li>-->
          <!--            <div class="left">-->
          <!--              <i class="el-icon-collection"></i>等级-->
          <!--            </div>-->
          <!--            <div class="right">-->
          <!--              <el-tag type="success" v-if="ruleForm.grade === 1">超级管理员</el-tag>-->
          <!--              <el-tag type="danger" v-else>普通管理员</el-tag>-->
          <!--            </div>-->
          <!--          </li>-->
          <li>
            <div class="left">
              <i class="el-icon-date"></i>创建日期
            </div>
            <div class="right">{{ruleForm.createTime}}</div>
          </li>
        </ul>
      </div>
    </el-card>

    <el-card class="edit">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="name">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="name">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="name">
              <el-radio v-model="ruleForm.sex" :label="0">女</el-radio>
              <el-radio v-model="ruleForm.sex" :label="1">男</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="editInfo">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form :model="pwForm" ref="pwFormRules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="旧密码" prop="password">
              <el-input v-model="pwForm.oddPassword" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="name">
              <el-input v-model="pwForm.password" type="password" show-password auto-complete="new-password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="name">
              <el-input v-model="pwForm.pw" auto-complete="new-password" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="editPassword">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <Avatar ref="avatar"></Avatar>
  </div>
</template>

<script>
  import {BASE_URL} from "../../settings"
  import {editAdmin, editPassword} from '../../api/api'
  import Avatar from "../../components/Avatar/Avatar"

  export default {
    name: "personal",
    data() {
      return {
        BASE_URL,
        activeName: 'first',
        ruleForm: {},
        pwForm: {},
      }
    },
    methods: {
      //获取资料
      async getPersonalInfo() {
        await this.$store.dispatch('getUser')
        this.ruleForm = this.$store.state.userInfo
        console.log(this.ruleForm,111)
      },
      //修改资料
      editInfo() {
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            const res = await editAdmin(this.ruleForm)
            this.$message.success('保存成功')
            this.getPersonalInfo()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //修改密码
      editPassword() {
        this.pwForm._id = this.ruleForm._id
        this.$refs.pwFormRules.validate(async valid => {
          if (valid) {
            const res = await editPassword(this.pwForm)
            this.$message.success('保存成功')
            this.getPersonalInfo()
            this.pwForm = {}
            this.$refs.pwFormRules.resetFields()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      openAvatar() {
        this.$refs.avatar.show()
      }
    },
    created() {
      this.getPersonalInfo()
    },
    components: {Avatar}
  }
</script>

<style scoped lang="scss">
  .personal {
    display: flex;

    .info {
      width: 40%;
      margin-right: 20px;

      .avatar {
        padding-bottom: 20px;
        text-align: center;
        border-bottom: 1px solid #e7eaec;

        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }

      ul {
        li {
          border-bottom: 1px solid #e7eaec;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 5px;
        }
      }
    }

    .edit {
      width: 80%;
    }
  }

  // 截图
  .cropper-content {
    .cropper {
      width: auto;
      height: 300px;
    }
  }
</style>
